import './index.scss'
import React, { useState, useEffect } from 'react'
import { Avatar, List, Button, Input, message } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import apis from '@/apis'
import CODE from '@/apis/code.config'
import dayjs from 'dayjs'
import { fetchUerInfoApi } from '@/store/modules/user'
import { HeartOutlined } from '@ant-design/icons'
const { TextArea } = Input
const Leave: React.FC = () => {
  const [msgList, setMsgList] = useState([])
  const getmsgList = async () => {
    const res = await apis.getMessageListApi()
    if (res.data.code === CODE.SUCCESS) {
      setMsgList(res.data.data)
    } else {
      message.error(res.data.message)
    }
  }
  useEffect(() => {
    getmsgList()
  }, [])
  const dispatch = useDispatch()
  useEffect(() => {
    async function getUserInfo() {
      await dispatch(fetchUerInfoApi())
    }
    getUserInfo()
  }, [])
  const [btnLoadings, setBtnLoadings] = useState<boolean>(false)
  const { userInfo } = useSelector((state: any) => state.user)
  //删除
  const delmsgClick = async (id: string) => {
    const res = await apis.delMessageApi({ id })
    if (res.data.code === CODE.SUCCESS) {
      message.success(res.data.message)
      getmsgList()
    } else {
      message.error(res.data.message)
    }
  }
  const [inputValue, setInputValue] = useState('')
  const inputChange = (e: any) => {
    setInputValue(e.target.value)
  }
  // 点赞
  const likeClick = async (id: string) => {
    const res = await apis.likeMessageApi({ id })
    if (res.data.code === CODE.SUCCESS) {
      message.success(res.data.message)
      getmsgList()
    } else {
      message.error(res.data.message)
    }
  }
  // 发言
  const submit = async () => {
    if (!inputValue) return message.warning('请输入留言')
    setBtnLoadings(true)
    const res = await apis.submitMessageApi({
      content: inputValue,
      username: userInfo.username,
      message_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    })
    if (res.data.code === CODE.SUCCESS) {
      message.success(res.data.message)
      getmsgList()
      setInputValue('')
    } else {
      message.error(res.data.message)
    }
    setBtnLoadings(false)
  }
  return (
    <div className="leavePage">
      <div className="top_box">
        <span>留言</span>
        <span style={{ color: '#9499A0', paddingLeft: 10 }}>
          {msgList.length}
        </span>
      </div>
      <div className="messageForm">
        <div className="avatar" />
        <TextArea
          value={inputValue}
          className="textArea"
          placeholder="来啦？整两句？"
          autoSize={{ minRows: 2, maxRows: 2 }}
          maxLength={255}
          onChange={inputChange}
        />
        <Button onClick={submit} loading={btnLoadings} type="primary">
          发表
        </Button>
      </div>
      <div className="messagelist">
        <List
          itemLayout="horizontal"
          dataSource={msgList}
          renderItem={(item, index) => (
            <List.Item key={index}>
              <List.Item.Meta
                avatar={
                  <Avatar
                    src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
                  />
                }
                title={item.username}
                description={
                  <div className="messageDate">
                    <div className="content_box">{item.content}</div>
                    <div className="date_box">
                      <span>{item.message_date}</span>
                      <HeartOutlined onClick={() => likeClick(item.id)} />
                      <span>{item.like_num}</span>
                      {(item.username === userInfo.username ||
                        userInfo.username === 'admin') && (
                        <a onClick={() => delmsgClick(item.id)}>删除</a>
                      )}
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}
export default Leave
